<script>
export default {
  name: 'Global-filter',
  data () {
    return {
      type: '1',
      typeValue: '-1',

      districtChecked: [],
      industryChecked: [],
      enterpriseListChecked: [],
      test: '1',
      testList: [
        { name: '区域', code: '1' },
        { name: '行业', code: '2' },
        { name: '企业', code: '3' },
      ],

      max: 4,
      time: this.$dayjs().format('YYYY年MM月DD日 hh:mm:ss')
    }
  },
  computed: {
    typeText () {
      return this.type === '1' ? '区域' : '行业'
    },
    typeValueText () {
      const target = this.options.find(v => v.value === this.typeValue)
      return target ? target.label : '不限'
    },
    districts () {
      return this.$store.getters['user/districts']
    },
    enterpriseList () {
      return this.$store.state.energyEnterpriseList
    },
    industryMapList () {
      return this.$store.state.industryMapList
    },
    disabled () {
      const districtChecked = this.districtChecked
      const industryChecked = this.industryChecked
      const enterpriseListChecked = this.enterpriseListChecked
      return districtChecked.length < 2 && industryChecked.length < 2 && enterpriseListChecked.length < 2
    },
    options () {
      const type = this.type
      if (type === '1') {
        return this.districts.map(v => ({
          label: v.name,
          value: v.code
        }))
      }
      return this.industryMapList.map(v => ({
        label: v.belongIndustryName,
        value: v.belongIndustry,
      }))
    },
  },
  watch: {
    type (val) {
      this.$EventBus.$emit('type-changed', { type: val, typeValue: '-1' })
    },
    typeValue (val) {
      this.$EventBus.$emit('type-value-changed', { typeValue: val, type: this.type })
    },
  },
  mounted () {
    this.$store.dispatch('GET_INDUSTRY_MAP_LIST')
    this.$store.dispatch('GET_ENTERPRISE_LIST')

    this.initClock()
  },
  beforeDestroy () {
    this.clockTimer && clearInterval(this.clockTimer)
  },
  methods: {
    initClock () {
      this.clockTimer && clearInterval(this.clockTimer)
      this.clockTimer = setInterval(() => {
        this.time = this.$dayjs().format('YYYY年MM月DD日 hh:mm:ss')
      }, 1e3)
    },
    testChange () {
      this.districtChecked = []
      this.industryChecked = []
      this.enterpriseListChecked = []
    },
    typeChange () {
      this.typeValue = '-1'
    },
    commandHandler (command) {
      this.typeValue = command
    },
    clickHandler () {
      const districtChecked = this.districtChecked
      const industryChecked = this.industryChecked
      const enterpriseListChecked = this.enterpriseListChecked
      let data = {}
      if (districtChecked.length > 1) {
        data = {
          type: 'district',
          values: districtChecked,
          names: this.districts.filter(v => districtChecked.includes(v.code)).map(v => v.name)
        }
      }
      if (industryChecked.length > 1) {
        data = {
          type: 'industry',
          values: industryChecked,
          names: this.industryMapList.filter(v => industryChecked.includes(v.belongIndustry)).map(v => v.belongIndustryName)
        }
      }
      if (enterpriseListChecked.length > 1) {
        data = {
          type: 'enterprise',
          values: enterpriseListChecked,
          names: this.enterpriseList.filter(v => enterpriseListChecked.includes(v.id)).map(v => v.name)
        }
      }
      this.$emit('comparison', { ...data })
    },
  }
}
</script>

<template>
  <div class="global-filter">
    <span class="time-clock">{{time}}</span>
    <el-popover popper-class="global-filter-popper" :width="500">
      <template #reference>
        <el-button type="primary">数据对比</el-button>
      </template>
      <div class="">
        <h3>选择对比方式</h3>
        <el-radio-group v-model="test" @change="testChange">
          <el-radio v-for="item in testList" :key="item.code" :label="item.code">{{item.name}}</el-radio>
        </el-radio-group>
      </div>
      <div class="el-divider el-divider--horizontal"></div>
      <template v-if="test === '1'">
        <el-checkbox-group v-model="districtChecked" :max="max">
          <el-checkbox v-for="item in districts" :key="item.code" :label="item.code">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-else-if="test === '2'">
        <el-checkbox-group v-model="industryChecked" :max="max">
          <el-checkbox v-for="item in industryMapList" :key="item.belongIndustry" :label="item.belongIndustry">{{item.belongIndustryName}}</el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-else-if="test === '3'">
        <el-checkbox-group v-model="enterpriseListChecked" :max="max">
          <el-checkbox v-for="item in enterpriseList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </template>
      <div class="padding">
        <el-button type="primary" :disabled="disabled" @click="clickHandler">开始对比</el-button>
      </div>
    </el-popover>
    <el-select v-model="type" style="width: 98px;margin-right: 1px;" @change="typeChange">
      <div slot="prefix" style="line-height: 33px;margin-right: 5px;font-size: 24px;color: #03c0ff;">
        <svg-icon name="data"></svg-icon>
      </div>
      <el-option value="1" label="区域"></el-option>
      <el-option value="2" label="行业"></el-option>
    </el-select>
    <el-dropdown @command="commandHandler">
      <el-button type="primary">
        {{typeValueText}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="-1">不限</el-dropdown-item>
        <el-dropdown-item v-for="option in options" :key="option.value" :command="option.value">{{option.label}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<style scoped>
.global-filter {
  margin-left: auto;
  z-index: 999;
  background: linear-gradient(to right, transparent 60%, #022142);
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;

  --text-color: #03c0ff;
}
.time-clock {
  color: var(--text-color);
  margin-right: 30px;
}
.global-filter ::v-deep .el-input__inner {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-color);
  padding-right: 0;
  padding-left: 34px;
  font-size: 1rem;
}
.global-filter ::v-deep .el-button {
  background: transparent;
  border: none;
  color: var(--text-color);
  padding-left: 0;
  font-size: 1rem;
}
.global-filter ::v-deep .el-select .el-input .el-select__caret {
  color: var(--text-color);
}
</style>
